<template>
  <div>
    <el-table :data="tableData">
      <div style="margin: 15px 0;"></div>
      <el-table-column label="选择">
        <template #default="scope">
          <el-checkbox v-model="scope.row.itemCheck" @change="toggleCheck(scope.row)"></el-checkbox>
        </template>
<!--        <el-checkbox :label="goods.id" :key="goods.id"></el-checkbox>-->
      </el-table-column>
      <el-table-column prop="goods.id" label="商品id"></el-table-column>
      <el-table-column prop="goods.name" label="商品名"></el-table-column>
      <el-table-column prop="goods.price" label="商品价格"></el-table-column>



        <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="Delete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>
    <br><br>
    <el-row>合&nbsp;&nbsp;计:{{allPrice}}元</el-row>
    <el-button @click="Buy()">购买</el-button>
    <el-button @click="Collection()">收藏</el-button>

  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  name: "ShoppingCar",
  data(){
    return{
      tableData:[
      ],
      checked: true,
      readorder:false,
      goods: {},
      user: {},
      allPrice: 0
    }
  },

  methods:{
    getShoppingcart() {
      request.get("http://localhost:8087/ShoppingCart/showUserShoppingCart").then(res => {
        if (res.flag) {
          this.tableData = res.data['cars']
          this.user = res.data['user']
          for (let val of this.tableData) {
            val.itemCheck = false;
          }
          this.tableData = this.tableData || [];
          this.$message({
            type: 'success',
            message: res.msg
          });
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    Delete(row){
      request.delete("http://localhost:8087/ShoppingCart/RemoveFromShoppingCart?id="+row.goods.id).then(res => {
        if (res.flag) {
          this.$message({
            type: 'success',
            message: res.msg
          });
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    Buy(){
      request.post("http://localhost:8087/ShoppingCart/BuySelectedGoods").then(res => {
        if (res.flag) {
          this.$message({
            type: 'success',
            message: res.msg
          });
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    Collection(){
      request.post("http://localhost:8087/ShoppingCart/MoveToCollection?userid="+this.user.id).then(res => {
        if (res.flag) {
          this.$message({
            type: 'success',
            message: res.msg
          });
        } else {
          this.$message.error(res.msg);
        }
      })
    },

    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      console.log(value.length)
    },
    toggleCheck(row){
      if(row.itemCheck){
        this.allPrice = this.allPrice + row.goods.price
      }
      else {
        this.allPrice = this.allPrice - row.goods.price
      }

}

    // getUser() {
    //   request.get("http://localhost:8087/user/getUserInfo").then(res => {
    //     console.log(res.data)
    //     if (res.flag) {
    //       this.user = res.data
    //       // this.form.tradePlace = res.data.defaultTraderPlace
    //       this.$message({
    //         type: 'success',
    //         message: res.msg
    //       })
    //     } else {
    //       this.$message.error(res.msg)
    //       this.account = ''
    //       this.password = ''
    //     }
    //   })
    // },
  },
  created(){
    this.getShoppingcart()
  },
  ShowCar(data){
    this.goods = data.goods
    this.readorder=true;
  },
  close1() {
    this.readorder = false;
  },

    }


</script>

<style scoped>
.div2{
  background-size: 100% ;
  float: left;
  margin-top: -200px;
}
.b3{
  margin-bottom: 20px;
}
.dialog1{
  z-index: 2;
}
</style>
